<template>
  <div ref="myChart" id="myChart"></div>
</template>

<script>
import { ordersByType } from '@/api/index/data';
import * as echarts from "echarts";

export default {
  data() {
    return {
      ordersData: [], // 用于存储从后端获取的数据
      myChart: null, // 用于存储 echarts 实例
    };
  },

  async mounted() {
    // 1.初始化
    this.myChart = echarts.init(this.$refs.myChart);
    // 2.设置配置项
    let option = {
      title: {
        text: '各服务类型订单数据扇形统计图',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['保洁清', '日常维修', '家居服务', '剪指甲', '测试服务', '测试项目']
      },
      series: [
        {
          name: '订单类型',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: this.ordersData, // 使用 ordersData 数组作为数据源
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    // 3.设置图表绘制图表
    this.myChart.setOption(option);
    // 调用 getData 方法获取数据
    await this.getData();
  },

  methods: {
    async getData() {
      try {
        // 使用 Promise.all 处理多个异步请求
        const types = ['保洁清', '日常维修', '家居服务', '剪指甲', '测试服务', '测试项目'];
        const data = await Promise.all(types.map(type => ordersByType(type)));
        this.ordersData = data.map((value, index) => ({ value: value, name: types[index] }));
        // 数据更新后重新设置图表的 option
        this.myChart.setOption({
          series: [{ data: this.ordersData }]
        });
      } catch (error) {
        console.error("Error fetching data: ", error);
      }
    }
  }
}
</script>

<style>
#myChart {
  width: 100%;
  height: 500px;
}
</style>